// 引入导航
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";

// 引入其他页面
import HomeScreen from "./views/HomeScreen";
import OnShowScreen from "./views/OnShowScreen";
import ComingSoonScreen from "./views/ComingSoonScreen";
import TheatreScreen from "./views/TheatreScreen";
import MovieDetailScreen from "./views/MovieDetailScreen";
import SearchScreen from "./views/SearchScreen";
import CitySelectScreen from "./views/CitySelectScreen";

// 引入其他自定义组件
import HomeBar from "./components/HomeBar";
import MoreHeader from "./components/MoreHeader";
import SearchBar from "./components/SearchBar";

// 创建一个栈导航
const Stack = createNativeStackNavigator();

// 创建一个顶部导航
const topTab = createMaterialTopTabNavigator();

// 引入仓库
import { Provider } from "react-redux";
import store from "./redux/store";

export default function App() {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <Stack.Navigator>
          {/* 首页 */}
          <Stack.Screen
            name="Home"
            component={HomeScreen}
            options={{
              header: ({ navigation }) => <HomeBar navigation={navigation} />,
              animation: "none",
            }}
          />
          {/* 更多电影 */}
          <Stack.Screen
            name="More"
            options={{
              header: ({ navigation }) => (
                <MoreHeader navigation={navigation} type="moreMovie" />
              ),
              headerBackVisible: false,
              headerShadowVisible: false,
              animation: "none",
            }}
          >
            {() => (
              <topTab.Navigator>
                <topTab.Screen name="正在热映" component={OnShowScreen} />
                <topTab.Screen name="即将上映" component={ComingSoonScreen} />
              </topTab.Navigator>
            )}
          </Stack.Screen>
          {/* 影院 */}
          <Stack.Screen
            name="Theatre"
            component={TheatreScreen}
            options={{
              header: ({ navigation }) => (
                <MoreHeader navigation={navigation} type="theatre" />
              ),
              headerBackVisible: false,
              headerShadowVisible: false,
              animation: "none",
            }}
          />
          {/* 电影详情 */}
          <Stack.Screen
            name="MovieDetail"
            component={MovieDetailScreen}
            options={{
              animation: "none",
              title: "电影详情",
              headerTitleAlign: "center",
            }}
          />
          {/* 电影搜索 */}
          <Stack.Screen
            name="SearchScreen"
            component={SearchScreen}
            options={{
              header: ({ navigation }) => <SearchBar navigation={navigation} />,
              animation: "none",
              headerBackVisible: false,
              headerShadowVisible: false,
            }}
          />
          {/* 选择城市 */}
          <Stack.Screen
            name="City"
            component={CitySelectScreen}
            options={{
              animation: "none",
              title: "选择城市",
              headerTitleAlign: "center",
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  );
}
